<template>
  <div class="gameInfo2048_main">
    <div class="gameInfo2048_pic"></div>

    <div class="gameInfo2048_text">
      <span>游戏简介</span>
      <p>《2048》是一款比较流行的数字游戏，最早于2014年3月20日发行。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli，后被移植到各个平台。这款游戏是基于《1024》和《小3传奇》的玩法开发而成的新型数字游戏。</p>
      <span>操作指南</span>
      <p>每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。</p>
      <span>游戏技巧</span>
      <p>1.最大数尽可能放在角落。</p>
      <p>2.数字按顺序紧邻排列。</p>
      <p>3.首先满足最大数和次大数在的那一列/行是满的。</p>
      <p>4.时刻注意活动较大数（32以上）旁边要有相近的数。</p>
      <p>5.以大数所在的一行为主要移动方向</p>
      <p>6.不要急于“清理桌面”。</p>
    </div>


  </div>
  <div class="gameInfo2048_main_2">
    <div class="gameInfo2048_main_2_ad">
      <div class="gameInfo2048_main_2_ad_title">
        <span>广告</span>&nbsp;<span id="close_ad" @click="close_adv">✖</span>
      </div>
      <video src="https://cloud.video.taobao.com//play/u/1621790841/p/1/e/6/t/1/390848881750.mp4" id="vdo" loop muted autoplay></video>
    </div>
    <div class="gameInfo2048_main_2_start_button" onclick="window.open('play2048.html','_self')">开始游戏</div>
  </div>
</template>

<script>
export default {
  name: "gameInfo2048",

  methods:{
    close_adv:function (){
    document.getElementById("vdo").style.visibility="hidden";
      document.getElementsByClassName("gameInfo2048_main_2_ad_title")[0].style.visibility="hidden";
    }
  }
}

function cancle_mute_f(){
  alert(1);
}
</script>

<style scoped>

#close_ad{
  cursor: pointer;
  z-index: 500;
  display: inline-block;
  height: 20px;
}

.gameInfo2048_main_2_ad_title{
  font-size: 14px;
  color: rgb(0,120,215);
  background-color: white;
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  position: absolute;
  right: 0;
}

.gameInfo2048_main_2_ad>video{
  width: 800px;
  height: 200px;
}

.gameInfo2048_main_2_ad{
  width: 800px;
  height: 200px;
  float: right;
  background-color: rgb(230,230,230);
  overflow: clip;
  border-radius: 3px;
}

.gameInfo2048_main_2_start_button{
  width: 200px;
  height: 70px;
  border-radius: 10px;
  background-color: limegreen;
  font-size: 22px;
  text-align: center;
  line-height: 70px;
  color: white;
  transition: all 0.1s;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  left: 100px;
  top: 65px;
}

.gameInfo2048_main_2_start_button:hover{
  background-color: #51e851;
}

.gameInfo2048_main_2_start_button:active{
  scale: 97%;
}

.gameInfo2048_text>span{
  font-weight: bold;
}

.gameInfo2048_text>p{
  text-indent: 2em;

}

.gameInfo2048_text{
  width: 800px;
  height: 475px;
  float: right;
  padding: 20px 20px;
  line-height: 28px;
  display: inline-block;
}

.gameInfo2048_main{
  width: 1200px;
  height: 475px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: clip;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.gameInfo2048_main_2{
  width: 1200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: clip;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 30px;
  margin-bottom: 20px;
  overflow: clip;
}

.gameInfo2048_pic{
  height: 475px;
  width: 400px;
  display: inline-block;
  float: left;
  background-color: rgb(230,230,230);
  background-position: -40px;
  background-size: 700px;
  background-repeat: no-repeat;
  background-image: url("/src/assets/banner/1.jpg");
  border-radius: 10px;
}

</style>